<div class="root">
    <list ref="list" class="list-wrapper" loadmoreoffset="15" @loadmore="fetchMore" @scroll="onScroll" offset-accuracy="30">
        <refresh class="refresh-view" @refresh="onRefresh" :display="refreshing ? 'show' : 'hide'">
            <loading-indicator class="refresh-indicator" ></loading-indicator>
            <text class="refresh-text font-msyhl">下拉释放刷新</text>
        </refresh>

        <!--banner-->
        <cell class="cell-panel" v-if="imageList.length" ref="ref_0">
            <home-indicator v-if="imageList.length" width=1040 height=500 :imgList="imageList" @sliderClick="bannerClick"></home-indicator>
        </cell>
        <!--/banner-->

        <!--店铺列表-->
        <cell class="cell-panel" v-if="shopList.length">
            <div class="shop-list">
                <div class="shop-item" v-for="shop in getSliceList(shopList,4)" :key="shop.shoptype" @click="goToShop(shop)">
                    <div class="shop-img-box">
                        <image resize="cover" class="shop-img" :src="shop.img"></image>
                    </div>
                    <text class="shop-tit font-msyhl">{{shop.name}}</text>
                </div>

                <!--全部店铺-->
                <div class="shop-item shop-all-item" @click="goToMoreShop">
                    <div class="shop-img-box">
                        <image resize="cover" class="shop-all-img" :src="shopAllIcon"></image>
                    </div>
                    <text class="shop-tit font-msyhl">全部商城</text>
                </div>
                <!--/全部店铺-->
            </div>
        </cell>
        <!--店铺列表-->

        <!--限时抢购-->
        <cell class="cell-panel" v-if="xsqgList.length">
            <div class="xsqg-panel title-panel" @click="goToTimeout">
                <text class="title-label font-msyh">限时抢购</text>

                <div class="xsqg-panel-clock">
                    <count-down v-if="clockNow && clockTarget" fontSize=36 color="#fff" clockType=1
                                :beginStr="clockNow" :endStr="clockTarget"
                                @over="alarm"
                    ></count-down>

                    <div class="right-arrow">
                        <image resize="cover" class="right-arrow-icon" :src="rightArrowWhiteImg"></image>
                    </div>
                </div>
            </div>

            <div class="xsqg-list">
                <div class="xsqg-item" v-for="(g,index) in getSliceList(xsqgList,4)" :key="g.id">
                    <goods-item-min :ref="'ref'+ g.id" :goods="g" :hasLabel="true"></goods-item-min>
                </div>
            </div>
        </cell>
        <!--/限时抢购-->

        <!--精选专题-->
        <cell class="cell-panel" v-if="specialData && specialData.recipe && specialData.recipe_shop.length">
            <div class="title-panel">
                <text class="title-label font-msyh">精选专题</text>
            </div>

            <div class="special-panel">
                <div class="special-item">
                    <image class="special-img" resize="cover" :src="specialData.recipe.img" @click="goToRecipe(g)"></image>
                    <text class="special-item-txt special-item-txt-top font-msyhl">冰箱配餐精选</text>
                    <text class="special-item-txt special-item-txt-bot font-msyhl">{{specialData.recipe.title}}</text>
                </div>

                <div class="recipe-list">
                    <div class="recipe-item" v-for="g in getSliceList(specialData.recipe_shop,2)" :key="g.id">
                        <goods-item-special :ref="'ref'+ g.id" :goods="g"></goods-item-special>
                    </div>
                </div>
            </div>
        </cell>
        <!--/精选专题-->

        <!--常购精选-->
        <cell class="cell-panel" v-if="cgjxList.length">
            <div class="cgjx-panel">
                <text class="cgjx-tit font-msyhl">常购精选</text>

                <div class="cgjx-list">
                    <div class="cgjx-item" v-for="(g,index) in getSliceList(cgjxList,4)" :key="g.id">
                        <goods-item-circle :ref="'ref'+ g.id" :goods="g"></goods-item-circle>
                    </div>
                </div>
            </div>
        </cell>
        <!--/常购精选-->

        <!--人气精选-->
        <cell class="cell-panel" v-if="rqjxList.length && rqjxGoodsList.length">
            <div class="rqjx-panel">
                <div class="rqjx-list">
                    <home-indicator width=635 height=400 v-if="rqjxList.length" :imgList="rqjxList" @sliderClick="bannerClick"></home-indicator>
                    <text class="rqjx-txt font-msyhl">人气精选</text>
                </div>

                <div class="rqjx-goods-list">
                    <div class="rqjx-goods-item" v-for="g in getSliceList(rqjxGoodsList,2)" :key="g.id">
                        <goods-item-special :ref="'ref'+ g.id" :goods="g"></goods-item-special>
                    </div>
                </div>
            </div>
        </cell>
        <!--/人气精选-->

        <!--热卖商品-->
        <cell v-if="hotGoodsList.length">
            <div class="title-panel">
                <text class="title-label font-msyh">热卖商品</text>
            </div>

            <div class="hot-goods-wrapper">
                <div class="hot-goods" v-for="(g, index) in hotGoodsList" :key="g.id">
                    <goods-item :ref="'ref'+ g.id" :goods="g"></goods-item>
                </div>
            </div>
        </cell>
        <!--/热卖商品-->

        <!--加载提示-->
        <loading-more-tip v-if="hotGoodsList.length && !listCompleted" color="#fff" :loading="loading"></loading-more-tip>

        <!--列表到底提示信息-->
        <cell v-if="listCompleted && hotGoodsList.length">
            <loaded-over-tip color="#fff"></loaded-over-tip>
        </cell>
    </list>

    <!--一键置顶-->
    <go-top :refEl="'ref_0'" :showGoTop="showGoTop" :isFixedNode="true"></go-top>
</div>
